import React, { Component, Fragment } from "react";
import { Button } from "antd";
import { Link } from "react-router-dom";
import $ from "jquery";
import { Upload, Icon, message, Tooltip } from "antd";
import Zmage from "react-zmage";
import { inject, observer } from "mobx-react";
import s from '../../assets/less/uploadBody.less'
import {
    base64_to_str,
    str_to_base64,
    img_format_size,
    getDivWidthAndHeight,
    getUploadImageWidthAndHeight
} from "../../utils/utils";
@inject("AdminStore")
@inject("HumanBodyManageStore")
@inject('YunYingStore')
@observer
export default class UploadPeople extends Component {
    constructor(props) {
        super(props);
        this.state = { image_base64: "", picture_file_state: "", uploading_state: false, body_retrieval_information_array: [], uploadLoadingIcon: false, drawed: false };
    }
    Reset_human_body_search_all_state_data = () => {
        this.setState((prevState) => ({
            image_base64: "", picture_file_state: "", uploading_state: false, body_retrieval_information_array: []

        }))
    }
    componentDidMount() {
        window.scrollTo(0, 0);

    }
    clear_the_previously_drawn_diagram_fun(id) {
        var c = document.getElementById(id);
        c.height = c.height;
    }
    beforeUpload = async file => {
        this.props.YunYingStore.ChangeChooseAttrShow(true)
        this.props.YunYingStore.AddNowWhichStep('搜索第三步选择属性')
        if (this.state.drawed) {//清空canvas
            this.clear_the_previously_drawn_diagram_fun('canvasid')
        }
        await new Promise((resolve, reject) => {
            var fr = new FileReader();
            fr.onload = () => {
                const fileType = "image/pngimage/jpgimage/jpeg";
                if (fileType.indexOf(file.type) < 0) {
                    message.info("请上传正确的图片格式");
                    return false;
                } else if (file.size > 5 * 1024 * 1024) {
                    message.info("图片不能大于5MB");
                    return false;
                } else {
                    let picture_base64 = fr.result; // picture_base64 没有格式转化的
                    this.setState(prevState => ({
                        image_base64: picture_base64,
                        picture_file_state: file,
                        uploadLoadingIcon: true
                    }), () => {
                        resolve(picture_base64);
                    });

                }
            };
            fr.readAsDataURL(file);
        });
        this.props.YunYingStore.storageImageBase64(this.state.image_base64)
        const featureResult = await this.props.HumanBodyManageStore.HumanFeatureExtractionFun(
            file,
            this.props.AdminStore.userName,
            this.props.AdminStore.token
        );
        const imgOriginalWidthAndHeight = await getUploadImageWidthAndHeight(this.state.image_base64)
        const imgCurrentWidthAndHeight = getDivWidthAndHeight(s.alternate_image_id)
        let scaling = imgCurrentWidthAndHeight[0] / imgOriginalWidthAndHeight[0]
        var canvasDom = document.getElementById("canvasid");
        var ctx = canvasDom.getContext("2d");
        let img = new Image();
        img.src = this.state.image_base64
        img = await new Promise((resolve, reject) => {
            img.onload = function () {
                resolve(img);
            }
        })
        ctx.drawImage(img, (getDivWidthAndHeight('canvasid')[0] - imgCurrentWidthAndHeight[0]) / 2, (getDivWidthAndHeight('canvasid')[1] - imgCurrentWidthAndHeight[1]) / 2, imgCurrentWidthAndHeight[0], imgCurrentWidthAndHeight[1]);
        console.log('我在画图')
        ctx.strokeStyle = '#00B9EF'
        ctx.rect(featureResult.body_position.l * scaling + (getDivWidthAndHeight('canvasid')[0] - imgCurrentWidthAndHeight[0]) / 2, featureResult.body_position.t * scaling + (getDivWidthAndHeight('canvasid')[1] - imgCurrentWidthAndHeight[1]) / 2, featureResult.body_position.w * scaling, featureResult.body_position.h * scaling)
        ctx.stroke();
        this.setState((prevState) => ({
            uploadLoadingIcon: false,
            drawed: true
        }))

    };
    render() {
        return (
            <Fragment>
                <div className={s.outerWrap} id='outerWrap' >
                    <Upload.Dragger beforeUpload={this.beforeUpload} className={s.upload} id="uploadId">
                        {this.state.image_base64 ? (
                            <React.Fragment>
                                <Icon type="loading" style={{ display: this.state.uploadLoadingIcon ? 'block' : 'none' }} className={s.icon} />
                                <canvas id="canvasid"
                                    width={getDivWidthAndHeight('outerWrap')[0]}
                                    height={getDivWidthAndHeight('outerWrap')[1]} className={s.img}>
                                </canvas>
                                <img src={this.state.image_base64} id={s.alternate_image_id} alt="" />
                            </React.Fragment>
                        ) : (
                                <React.Fragment>
                                    <div className={s.plus}></div>
                                    <div className={s.describe}>
                                        选择图片
                                    </div>
                                </React.Fragment>
                            )}
                    </Upload.Dragger>
                    <div className="attention">注：请上传全身人体图片</div>
                </div>

            </Fragment>
        );
    }
}
